<template>
  <div class="play-comments">
    <header>
      <div class="left icon_base" @click="$router.back()"></div>
      <div class="middle">评论({{ comments.length + hotComments.length }})</div>
      <div class="right icon_base"></div>
    </header>

    <div class="container">
      <div class="thumb-message" @click="$router.back()">
        <div class="left">
          <img :src="$route.query.coverImgUrl" alt="" />
        </div>

        <div class="middle">{{ $route.query.name }}</div>

        <div class="right">&gt;</div>
      </div>

      <hr />

      <UserCommentArea :comments="comments" :hotComments="hotComments" />
    </div>
  </div>
</template>

<script>
import UserCommentArea from "@/components/area/UserCommentArea.vue";
export default {
  name: "PlayComments",
  components: {
    UserCommentArea,
  },
  data() {
    return {
      comments: [],
      hotComments: [],
      value: 0,
      option: [
        { text: "最新", value: 0 },
        { text: "最热", value: 1 },
      ],
    };
  },
  async created() {
    // 获取歌单评论
    const { id } = this.$route.query;
    const res = await this.axios({ url: "/comment/playlist", params: { id } });
    const { comments, hotComments } = res.data;
    this.comments = comments;
    this.hotComments = hotComments;
  },

  methods: {
    handChange(index) {
      this.active = index;
    },
  },
};
</script>

<style lang="less" scoped>
.play-comments {
  width: 100%;

  header {
    width: 100%;
    height: 50px;
    display: flex;

    .middle {
      flex: 1;
      line-height: 50px;
      padding-left: 20px;
    }

    .left,
    .right {
      width: 50px;
      height: 100%;
    }

    .left {
      background-image: url("@/assets/返回_黑色.png");
    }

    .right {
      background-image: url("@/assets/更多_竖向_黑色.png");
    }
  }

  .container {
    padding: 5px;

    .thumb-message {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .left {
        width: 40px;
        height: 100%;

        img {
          border-radius: 10px;
        }
      }

      .middle {
        flex: 1;
        padding-left: 20px;
      }

      .right {
        font-size: 12px;
      }
    }

    .sort-bar {
      width: 100%;
      height: 35px;

      .container {
        width: 70%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
          width: 45%;
          height: 100%;
          color: #67686c;
          background-color: #f6f7fb;
          border-radius: 10px;
          text-align: center;
          line-height: 35px;
          font-size: 14px;

          &.active {
            color: #1c8cd7;
            background-color: #e8f5fe;
            transition: 1s;
          }
        }
      }
    }
  }
}
</style>
